<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>问卷管理</title>
	<link rel="stylesheet" href="../../lib/element-ui/theme-chalk/index.css">
	<link rel="stylesheet" href="../../lib/vxe-table/index.css">
	<link rel="stylesheet" href="../../lib/vxe-table-plugin-element/style.css">
	<link rel="stylesheet" href="../../lib/font-awesome/css/font-awesome.min.css">
	<script type="text/javascript" src="../../lib/vue/vue.js"></script>
	<script type="text/javascript" src="../../lib/xe-utils/xe-utils.js"></script>
	<script type="text/javascript" src="../../lib/element-ui/index.js"></script>
	<script type="text/javascript" src="../../lib/vxe-table/index.js"></script>
	<script type="text/javascript" src="../../lib/vxe-table-plugin-element/index.js"></script>
	<script type="text/javascript" src="../../lib/xlsx/xlsx.full.min.js"></script>
	<script type="text/javascript" src="../../lib/vxe-table-plugin-export-xlsx/index.min.js"></script>
	<script type="text/javascript" src="../../lib/xe-ajax/xe-ajax.js"></script>
	<script type="text/javascript" src="../../static/js/jquery.min.js"></script>
	<script type="text/javascript" src="../../static/js/webApi.js"></script>
	<script type="text/javascript" src="../../static/js/tool.js"></script>
	<style type="text/css">
		/*
		        找到html标签、body标签，和挂载的标签
		        都给他们统一设置样式
		    */
		html,
		body,
		#app,
		.el-container {
			/*设置内部填充为0，几个布局元素之间没有间距*/
			padding: 0px;
			/*外部间距也是如此设置*/
			margin: 0px;
			/*统一设置高度为100%*/
			height: 100%;
		}

		.el-main {
			padding: 4px;
		}
	</style>
</head>

<body>
	<el-container id="app">
		<el-main>
			<div>
				<vxe-grid border ref="xGrid" resizable show-overflow highlight-hover-row highlight-current-row
					keep-source :height="tableHeight" size="mini" :data="tableData" :toolbar="tableToolbar"
					:edit-config="{trigger:'click', mode:'row'}" :header-cell-style="{'text-align':'center'}"
					@toolbar-button-click="toolbarButtonClickEvent">
					<vxe-table-column type="checkbox" width="50" headerAlign="center" align="center">
					</vxe-table-column>
					<vxe-table-column field="paperName" title="问卷名称" width="350" headerAlign="center" align="left">
					</vxe-table-column>
					<vxe-table-column field="pnum" title="是否配置过问卷" width="110" headerAlign="center" align="center">
						<template v-slot="{ row }">
							<el-link :type="row.pnum==null? 'primary' :'success'"
								:disabled="row.pnum==null? false : true" style="font-size: 12px;"
								@click="gotoNewpage(row)">{{formatPnum(row.pnum)}}</el-link>
						</template>
					</vxe-table-column>
					<!--
					<vxe-table-column field="state" title="状态" width="80" headerAlign="center" align="center">
						<template v-slot="{ row }">
							<span
								:style="row.state=='1'? 'color:#ff0000' : row.state=='3'? 'color:#13ce66' : 'color:#d8d8d8' ">{{formatState(row.state)}}</span>
						</template>
					</vxe-table-column>
					-->
					<vxe-table-column field="dsc" title="备注" width="350" headerAlign="center" align="left">
					</vxe-table-column>
					<vxe-table-column field="userName" title="创建人" width="100" headerAlign="center" align="center">
					</vxe-table-column>
					<vxe-table-column field="createTime" width="190" title="创建日期" headerAlign="center" align="center"
						:formatter="formatDate"></vxe-table-column>
					</vxe-table-column>
					<vxe-table-column title="操作" headerAlign="center" align="left" show-overflow>
						<template v-slot="{ row }">
							<vxe-button status="primary" size="mini" content="查看问卷"
								@click="seeWenJuan(row.id,row.paperName)">
							</vxe-button>
						</template>
					</vxe-table-column>
				</vxe-grid>

				<vxe-pager style="margin-bottom: 20px;padding-top: 10px;text-align: left;" background
					:page-size.sync="pageSizeHouse" :current-page.sync="currentPageHouse" :total="totalSize"
					@page-change="handleCurrentChange" size="mini"
					:layouts="['Sizes','PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump','FullJump', 'Total']">
				</vxe-pager>

				<vxe-modal v-model="isShowModel" :title="isAddOrUpdate ? '新增问卷信息' : '编辑问卷信息' " :width="modelWith"
					@close="clseModel" show-zoom resize remember>
					<template #default>
						<el-form :model="formData" :rules="formRules" ref="ruleForm" label-width="100px"
							class="demo-ruleForm" style="padding: 20px 50px 0 50px;">
							<el-form-item label="问卷名称:" prop="name">
								<el-input type="text" :autosize="{ minRows: 8, maxRows: 10}" placeholder="请输入问卷名称"
									v-model="formData.name" style="width: 400px; text-align: center;">
								</el-input>
							</el-form-item>
							<el-form-item label="备注:" prop="desc">
								<el-input type="textarea" :autosize="{ minRows: 8, maxRows: 10}" placeholder="请输入备注"
									v-model="formData.desc" style="width: 400px;">
								</el-input>
							</el-form-item>
							<el-form-item style="text-align: right;">
								<el-button type="primary" @click="submitForm('ruleForm')" size="mini"
									icon="el-icon-folder">保存</el-button>
								<el-button type="warning" icon="el-icon-refresh" size="mini"
									@click="resetForm('ruleForm')">重置</el-button>
							</el-form-item>
						</el-form>
					</template>
				</vxe-modal>

				<vxe-modal v-model="isShowPSQIssue" title="问卷下发" width="50%" height="50%" show-zoom resize
					@close="closePSQIssue">
					<template #default>
						<el-form :model="issueData" :rules="issueRules" ref="issueruleForm" label-width="100px"
							class="demo-ruleForm" style="padding: 50px;">
							<el-form-item label="选择组:" prop="group">
								<el-cascader v-model="issueData.group" :options="groupOptions" style="width: 350px;"
									:props="{ multiple: true, checkStrictly: true }" clearable @clear="clearGroup">
								</el-cascader>
							</el-form-item>
							<el-form-item label="问卷时长:" prop="times">
								<el-date-picker v-model="issueData.times" type="daterange" range-separator="至"
									start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
								</el-date-picker>
							</el-form-item>
							<el-form-item style="text-align: right;">
								<el-button type="primary" @click="submit('issueruleForm')">保存</el-button>
								<el-button @click="reset('issueruleForm')">重置</el-button>
							</el-form-item>
						</el-form>
					</template>
				</vxe-modal>

			</div>
		</el-main>
	</el-container>
</body>

<script>
	window.onload = function () {
		var main = {
			data() {
				return {
					tableHeight: 500,
					// tablePage: {
					// 	perfect: true,
					// 	total: 0,
					// 	currentPage: 1,
					// 	pageSize: 15,
					// 	align: 'right',
					// 	pageSizes: [15, 30, 45, 60, 75, 90],
					// 	layouts: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump',
					// 		'Total'
					// 	],
					// },
					tableToolbar: {
						buttons: [{
							code: 'addPSQ',
							name: '新增问卷',
							status: 'perfect',
							icon: 'el-icon-circle-plus-outline',
						},
						{
							code: 'updatePSQ',
							name: '编辑问卷',
							status: 'perfect',
							icon: 'el-icon-edit',
						},
						{
							code: 'delPSQ',
							name: '删除问卷',
							status: 'perfect',
							icon: 'el-icon-circle-close',
						},
						{
							code: 'issuesManagement',
							name: '编辑问卷信息',
							status: 'perfect',
							icon: 'el-icon-document-copy',
						},
							//{
							//	code: 'PSQIssue',
							//	name: '下发问卷',
							//	status: 'perfect',
							//	icon: 'el-icon-sold-out',
							//},
						],
						refresh: false,
						perfect: true,
						custom: true
					},
					// tableProxy: {
					// 	props: {
					// 		result: 'data.rows',
					// 		total: 'data.total'
					// 	},
					// 	ajax: {
					// 		// 任何支持 Promise API 的库都可以对接（fetch、jquery、axios、xe-ajax） page 对象： { pageSize, currentPage }
					// 		query: ({
					// 			page,
					// 			sort,
					// 			filters
					// 		}) => {
					// 			return XEAjax.post(`${curlFinance}/wenjuan/examPaperQuery`, {
					// 				"currentPage": page.currentPage, //当前页
					// 				"pageSize": page.pageSize, //每页数 
					// 				"orgCode": '',
					// 				"code": '',
					// 				"name": ''
					// 			});
					// 		}
					// 	}
					// },
					isShowModel: false,
					isAddOrUpdate: 1, // 1:新增   0:编辑
					dialogVisible: false,
					formData: {
						name: null,
						desc: null,
					},
					formRules: {
						name: [{
							required: true,
							message: '请输入问卷名称',
							trigger: 'blur'
						}],
					},
					modelWith: '50%',
					modelHeight: '90%',
					isShowPSQIssue: false,
					issueData: {
						group: [],
						times: null,
					},
					issueRules: {
						group: [{
							required: true,
							message: '请输入问卷名称',
							trigger: 'blur'
						}],
						times: [{
							required: true,
							message: '请选择问卷时长',
							trigger: 'blur'
						}],
					},
					groupOptions: [],
					pickerOptions: {
						disabledDate(time) {
							return time.getTime() < Date.now();
						},
					},
					pageSizeHouse: 15, //每页显示的条数
					currentPageHouse: 1, //当前第几页
					totalSize: 0, //总页数
					tableData: [],
				}
			},
			created() {
				this.examPaperQuery()
				//this.getAreaAndBuildingTree()
			},
			mounted() {
				this.tableHeight = window.innerHeight - this.$refs.xGrid.$el.offsetTop - 75;
			},
			methods: {
				examPaperQuery() {
					this.tableData = []
					webApi(`/wenjuan/examPaperQuery`, 'post', {
						"page": this.currentPageHouse, //当前页
						"rows": this.pageSizeHouse, //每页数
						"orgCode": '',
						"code": '',
						"name": ''
					}, (data) => {
						if (data.code == 200) {
							this.tableData = data.data.list
							this.totalSize = data.data.total
						} else {
							this.$XModal.message({
								message: '获取数据失败',
								status: 'error'
							});
						}
					}, function (error) {
						self.$XModal.message({
							message: res.msg,
							status: 'error'
						})
					});
				},
				handleCurrentChange(e) {
					this.currentPageHouse = e.currentPage
					this.pageSizeHouse = e.pageSize
					this.examPaperQuery()
				},
				formatDate({
					cellValue
				}) {
					return XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:MM:ss')
				},
				formatState(cellValue) {
					switch (cellValue) {
						case 0:
							return '失效'
							break;
						case 1:
						case 2:
							return '未下发'
							break;
						case 3:
							return '已下发'
							break;
						default:
							break;
					}
				},
				formatPnum(cellValue) {
					return cellValue == null ? '未配置' : '已配置'
				},
				toolbarButtonClickEvent({
					code
				}, event) {
					switch (code) {
						case 'addPSQ':
							this.isShowModel = true;
							this.isAddOrUpdate = 1
							break;
						case 'updatePSQ':
							console.log("编辑");
							const checkBox = this.$refs.xGrid.getCheckboxRecords()
							if (checkBox.length > 0) {
								if (checkBox.length < 2) {
									if (checkBox[0].state == 3) {
										this.$message({
											message: "该问卷已下发，暂不支持修改",
											type: 'warning'
										})
									} else if (checkBox[0].state == 0) {
										this.$message({
											message: "该问卷已失效，暂不支持修改",
											type: 'warning'
										})
									} else if (checkBox[0].state == 1 || checkBox[0].state == 2) {
										this.formData.name = checkBox[0].paperName
										this.formData.desc = checkBox[0].dsc
										this.isShowModel = true;
										this.isAddOrUpdate = 0
									}
								} else {
									this.$message({
										message: "只能选择一条数据进行编辑",
										type: 'warning'
									})
								}
							} else {
								this.$message({
									message: "请至少选择一条数据进行编辑",
									type: 'warning'
								})
							}
							break;
						case 'delPSQ':
							const checkBoxDel = this.$refs.xGrid.getCheckboxRecords()
							if (checkBoxDel.length > 0) {
								if (checkBoxDel.length < 2) {
									this.$XModal.confirm('确定要删除该数据？').then(type => {
										if (type == 'confirm') {
											XEAjax.post(`${curl}/wenjuan/examPaperDel?id=` +
												checkBoxDel[0].id).then(res => {
													if (res.code == 200) {
														this.$message({
															message: res.msg,
															type: 'success'
														})
														this.examPaperQuery()
													} else {
														this.$message({
															message: res.msg,
															type: 'error'
														})
													}
												});
										}
									})
								} else {
									this.$message({
										message: "只能选择一条数据进行编辑",
										type: 'warning'
									})
								}
							} else {
								this.$message({
									message: "请至少选择一条数据",
									type: 'warning'
								})
							}
							break;
						case 'issuesManagement':
							setTimeout(() => {
								const checkBox = this.$refs.xGrid.getCheckboxRecords()
								if (checkBox.length > 0) {
									if (checkBox.length < 2) {
										if (checkBox[0].state == 3) {
											this.$message({
												message: "该问卷已下发，暂不支持修改",
												type: 'warning'
											})
										} else if (checkBox[0].state == 0) {
											this.$message({
												message: "该问卷已失效，暂不支持修改",
												type: 'warning'
											})
										} else if (checkBox[0].state == 1 || checkBox[0].state == 2) {
											setTimeout(() => {
												Tool.openTabEvent(
													'../question/editExamPaper.html',
													'问卷信息', {
													'id': checkBox[0].id,
													'name': encodeURIComponent(checkBox[0]
														.paperName)
												});
											}, 300)
										}
									} else {
										this.$message({
											message: "只能选择一条数据进行编辑",
											type: 'warning'
										})
									}
								} else {
									this.$message({
										message: "请至少选择一条数据进行编辑",
										type: 'warning'
									})
								}
							}, 300)
							break;
						case 'PSQIssue':
							const checkBoxIssue = this.$refs.xGrid.getCheckboxRecords()
							if (checkBoxIssue.length > 0) {
								if (checkBoxIssue.length < 2) {
									if (checkBoxIssue[0].state == 3) {
										if (checkBoxIssue[0].pnum != null) {
											this.$XModal.confirm('该问卷已下发，是否要重新下发？').then(type => {
												if (type == 'confirm') {
													//	this.getAreaAndBuildingTree()
													this.isShowPSQIssue = true
												}
											})
										} else {
											this.$message({
												message: "请先进行问卷配置，配置问卷请勾选问卷在点击'编辑问卷信息！'",
												type: 'warning'
											})
										}
									} else if (checkBoxIssue[0].state == 0) {
										this.$message({
											message: "该问卷已失效，不支持下发",
											type: 'warning'
										})
									} else if (checkBoxIssue[0].state == 1 || checkBoxIssue[0].state == 2) {
										if (checkBoxIssue[0].pnum != null) {
											this.getAreaAndBuildingTree()
											this.isShowPSQIssue = true
										} else {
											this.$message({
												message: "请先进行问卷配置，配置问卷请先勾选问卷在点击 ‘编辑问卷信息！’按钮",
												type: 'warning'
											})
										}
									}
								} else {
									this.$message({
										message: "只能选择一条数据进行编辑",
										type: 'warning'
									})
								}
							} else {
								this.$message({
									message: "请至少选择一条数据",
									type: 'warning'
								})
							}
							break;
					}
				},
				submitForm(formName) {
					this.$refs[formName].validate((valid) => {
						if (valid) {
							this.isAddOrUpdate ? this.examPaperAdd() : this.examPaperEdit()
						} else {
							return false;
						}
					});
				},
				resetForm(formName) {
					this.$refs[formName].resetFields();
				},
				submit(formName) {
					this.$refs[formName].validate((valid) => {
						if (valid) {
							this.bindBuildPaper()
						} else {
							return false;
						}
					});
				},
				reset(formName) {
					this.$refs[formName].resetFields();
				},
				clseModel() {
					this.formData = {
						name: null,
						desc: null,
					}
				},
				examPaperAdd() {
					let params = {
						areaCode: "",
						createTime: "",
						createUser: "",
						dsc: this.formData.desc,
						endTime: "",
						id: 0,
						paperName: this.formData.name,
						paperQuestionAll: 0,
						paperScore: 0,
						questionType: "",
						startTime: "",
						state: 0,
						testTime: 0
					}
					XEAjax.post(`${curl}/wenjuan/examPaperAdd`, params).then(res => {
						if (res.code == 200) {
							this.$message({
								message: res.msg,
								type: 'success'
							})
							this.isShowModel = false
							this.examPaperQuery()
							this.formData = {
								name: null,
								desc: null,
							}
						} else {
							this.$message({
								message: res.msg,
								type: 'error'
							})
						}
					});
				},
				examPaperEdit() {
					const checkBox = this.$refs.xGrid.getCheckboxRecords()
					console.log(111);
					let params = {
						dsc: this.formData.desc,
						id: checkBox[0].id,
						paperName: this.formData.name,
					}
					XEAjax.post(`${curl}/wenjuan/examPaperEdit`, params).then(res => {
						if (res.code == 200) {
							this.$message({
								message: res.msg,
								type: 'success'
							})
							this.isShowModel = false
							this.examPaperQuery()
							this.formData = {
								name: null,
								desc: null,
							}
						} else {
							this.$message({
								message: res.msg,
								type: 'error'
							})
						}
					});
				},
				seeWenJuan(id, paper_name) {
					setTimeout(() => {
						Tool.openTabEvent('../question/seeWenJuan.html', '问卷预览', {
							'id': id,
							'name': encodeURIComponent(paper_name)
						});
					}, 300)
				},
				clearGroup() {
					this.issueData.group = []
				},
				bindBuildPaper() {
					const checkBoxIssue = this.$refs.xGrid.getCheckboxRecords();
					console.log(this.issueData.group)
					let BeginTime = new Date(this.issueData.times[0])
					BeginTime = BeginTime.getFullYear() + '-' + (BeginTime.getMonth() + 1) + '-' + BeginTime
						.getDate()
					let EndTime = new Date(this.issueData.times[1])
					EndTime = EndTime.getFullYear() + '-' + (EndTime.getMonth() + 1) + '-' + EndTime.getDate()
					if (checkBoxIssue.length > 0) {
						if (checkBoxIssue.length < 2) {
							let AreaId = ""
							for (var i = 0; i < this.issueData.group.length; i++) {
								if (this.issueData.group[i].length == 1) {
									if (AreaId != '') {
										AreaId += ',' + this.issueData.group[i][0];
									} else {
										AreaId += this.issueData.group[i][0];
									}
								}
							}
							XEAjax.post(`${curl}/wenjuan/bindPaper?AreaId=` + AreaId +
								"&PaperId=" + checkBoxIssue[0].id +
								'&BeginTime=' + BeginTime + '&EndTime=' + EndTime).then(res => {
									if (res.code == 200) {
										this.$message({
											message: res.msg,
											type: 'success'
										})
										this.isShowPSQIssue = false
										this.examPaperQuery()
										this.issueData = {
											group: [],
											times: null,
										}
									} else {
										this.$message({
											message: res.msg,
											type: 'error'
										})
									}
								});
						} else {
							this.$message({
								message: "暂不支持多个问卷同时进行下派",
								type: 'warning'
							})
						}
					} else {
						this.$message({
							message: "请至少选择一条数据",
							type: 'warning'
						})
					}
				},
				getAreaAndBuildingTree() {
					XEAjax.post(`${curl}/org/getOrgZtree`).then(res => {
						let arr = [];
						for (let o in res) {
							arr.push({ "value": res[o].departId, "label": res[o].departName })
						}
						this.groupOptions = arr
						//if (res.code == 200) {
						//	this.groupOptions = res.data
						//} else {
						//	this.$message({
						//		message: res.msg,
						//		type: 'error'
						//	})
						//}
					});
				},
				closePSQIssue() {
					this.issueData = {
						group: [],
						times: null,
					}
				},
				gotoNewpage(row) {
					if (row.state == 3) {
						this.$message({
							message: "该问卷已下发，暂不支持修改",
							type: 'warning'
						})
					} else if (row.state == 0) {
						this.$message({
							message: "该问卷已失效，暂不支持修改",
							type: 'warning'
						})
					} else if (row.state == 1 || row.state == 2) {
						setTimeout(() => {
							Tool.openTabEvent('../question/editExamPaper.html', '问卷信息', {
								'id': row.id,
								'name': encodeURIComponent(row.paperName)
							});
						}, 300)
					}
				}
			}
		};
		var vue = Vue.extend(main);
		new vue().$mount('#app');
	}
</script>

</html>